<template>
  <main-card :title="title" icon-name="icon-file-line" :crumbs="crumbs" :loading="loading" :show-screen-space="false">
    <div class="page-table">
      <div class="pb-44 pt-12">
        <a-select
          ref="select"
          v-model:value="pageForm.status"
          style="width: 132px"
          :options="typeOptions"
          :field-names="{ label: 'label', value: 'value' }"
          @change="getDataList({ offset: 1 })"
        />
      </div>
      <a-table
        :columns="tableColumns"
        :data-source="dataList"
        :pagination="false"
        :style="{ width: '100%' }"
        :custom-row="r => ({ onClick: () => handleToDetail(r) })"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'status'">
            <div :class="['table__status', getTaskStatusItem(record.status).isError && 'error']">
              {{ getTaskStatusItem(record.status).name }}
            </div>
          </template>
          <template v-else-if="column.dataIndex === 'startTime'">
            {{ spliceTwoTimes(record.startTime, record.endTime) }}
          </template>
          <template v-else-if="column.dataIndex === 'operate'">
            <i class="cursor-pointer icon-download-2-line iconfont" @click.stop="downloadTaskRecord(record.id as string)"></i>
          </template>
        </template>
      </a-table>
    </div>
    <g-pagination v-model:offset="pageForm.offset" v-model:limit="pageForm.limit" :total="pageForm.total" @change="getDataList" />
  </main-card>
</template>

<script setup lang="ts">
  import { computed, ref } from 'vue'
  import { useRoute, useRouter } from 'vue-router'

  import GPagination from '@/components/GPagination/index.vue'
  import MainCard from '@/components/MainCard/index.vue'
  import useList from '@/hooks/use-list'
  import { algoTestApi } from '@/services'
  import { filterTableColumns, spliceTwoTimes } from '@/utils'

  import { getTaskStatusItem } from '../options'
  import { downloadTaskRecord } from '../utils'

  const route = useRoute()
  const router = useRouter()

  const title = `${route.query.name}（记录）`
  const crumbs = computed(() => [{ name: '算法测试', path: '/algo-test/task-list' }, { name: title }])

  // 类型
  const typeOptions = [
    {
      label: '全部状态',
      value: ''
    },
    {
      label: '运行成功',
      value: 3
    },
    {
      label: '运行失败',
      value: 4
    },
    {
      label: '运行超时',
      value: 5
    }
  ]

  // 表格
  const tableColumns = ref(
    filterTableColumns([
      {
        title: '操作人',
        dataIndex: 'username',
        width: 240
      },
      {
        title: '运行起止时间',
        dataIndex: 'startTime',
        minWidth: 360
      },
      {
        title: '状态',
        dataIndex: 'status',
        width: 190
      },
      {
        title: '操作',
        width: 80,
        dataIndex: 'operate'
      }
    ])
  )

  const { pageForm, dataList, loading, getDataList } = useList(algoTestApi.recordList, {
    taskId: route.params.id,
    status: '',
    order: 'desc'
  })

  // 跳转到详情
  const handleToDetail = (r: any) => {
    // TODO:静态页面需要status，后需删除
    router.push(`/algo-test/record-detail/${r.id}?taskStatus=${r.status}`)
  }

  getDataList()
</script>

<style lang="less" scoped>
  .page-top {
    padding: 0;
    // width: 100%;
    box-sizing: border-box;

    .pagetop-active {
      color: rgba(29, 32, 132, 1);
      background-color: transparent;
      border: none !important;
      box-shadow: none;
    }

    & > .ant-col {
      display: flex;
      align-items: center;
    }

    .ant-col + .ant-col {
      margin-left: 16px;
    }
  }

  .icon-download-2-line {
    font-size: 18px;
    color: rgba(0, 156, 248, 1);
  }

  .subtitle {
    margin-top: 8px;
    font-size: 14px;
    color: @text02;
    line-height: 22px;
  }
</style>
